<template>
  <div style="height: 100%;">
    <view-box
      ref="viewBox"
      :body-padding-top="isShowNav ? topPadding : '0'"
      :body-padding-bottom="isTabar ? bottomPadding : '0'">
      <x-header
        v-if="isShowNav"
        style="width:100%;position:absolute;left:0;top:0;z-index:100;"
        slot="header"
        :left-options="leftOptions"
        :title="title"
      >
        <select v-if="this.route.path === '/index'" @change="changeLanguage" v-model="language" class="header-selected" slot="right">
          <option value="zh-CN">{{$t('vux.zhCN')}}</option>
          <option value="en">{{$t('vux.en')}}</option>
        </select>
        <span @click="goFeedback" slot="right" v-if="this.route.path === '/charting'">{{$t('feedback')}}</span>
        </x-header>
        <router-view class="router-view"></router-view>
        <tabbar
        v-if="isTabar"
        icon-class="vux-center"
        slot="bottom">
          <!--:link="{path:'/index'}"-->
        <tabbar-item @click.native="goMenu('index')"  :selected="route.path === '/'">
          <span v-if="route.path === '/index'" slot="icon" ><img style="margin-top: 0.1rem; width: 20px;height: 20px;"  src="./assets/img/home2.png" alt="i"></span>
          <span v-else slot="icon" ><img style="margin-top: 0.1rem; width: 20px;height: 20px;"  src="./assets/img/home.png" alt="i"></span>
          <span slot="label">
            {{$t('home')}}
          </span>
        </tabbar-item>
          <!--:link="{path:'/mill'}"-->
        <tabbar-item @click.native="goMenu('mill')" :selected="route.path === '/mill'">
          <span slot="icon">
            <img v-if="route.path === '/mill'" style="margin-top: 0.09rem; width: 27px;height: 19px;"  src="./assets/img/mill2.png" alt="i">
            <img v-else style="margin-top: 0.09rem; width: 27px;height: 19px;"  src="./assets/img/mill.png" alt="i">
          </span>
          <span slot="label"><span>
            {{$t('miner')}}
          </span></span>
        </tabbar-item>
        <!--<tabbar-item :link="{path:'/transaction'}" :selected="route.path === '/transaction'">-->
          <!--<span v-if="route.path === '/transaction'" slot="icon"><img src="./assets/img/transaction2.png" style="margin-top: 0.07rem; width: 20px;height: 20px;" alt=""></span>-->
          <!--<span v-else slot="icon"><img src="./assets/img/transaction.png" style="margin-top: 0.07rem; width: 20px;height: 20px;" alt=""></span>-->
          <!--<span slot="label"><span>-->
              <!--{{$t('trade')}}-->
          <!--</span></span>-->
        <!--</tabbar-item>-->
          <!--:link="{path:'/charting'}"-->
        <tabbar-item @click.native="goMenu('charting')"  :selected="route.path === '/charting'">
          <span v-if="route.path === '/charting'" slot="icon">
            <img src="./assets/img/transaction2.png" style="margin-top: 0.07rem; width: 20px;height: 20px;" alt="i"></span>
          <span v-else slot="icon"><img src="./assets/img/transaction.png" style="margin-top: 0.07rem; width: 20px;height: 20px;" alt="i"></span>
          <span slot="label"><span>
              {{$t('server')}}
          </span></span>
        </tabbar-item>
          <!--:link="{path:'/personal'}"-->
        <tabbar-item @click.native="goMenu('personal')"  :selected="route.path === '/personal'">
          <!--<span class="icon-tabbar" slot="icon">&#xec72;</span>-->
          <span v-if="route.path === '/personal'" slot="icon"><img  style="width: 20px;height: 22px;margin-top: 0.07rem" src="./assets/img/my2.png" alt="i"></span>
          <span v-else slot="icon"><img src="./assets/img/my.png" alt="i"></span>
          <span slot="label"><span>
             {{$t('mine')}}
          </span></span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<i18n>
  home:
    en: Home
    zh-CN: 首页
  miner:
    en: Miner
    zh-CN: 矿机
  trade:
    en: Trade
    zh-CN: 交易
  server:
    en: Server
    zh-CN: 客服
  mine:
    en: Mine
    zh-CN: 我的
  need login:
    en: Need Login
    zh-CN: 需要登录
  feedback:
    en: Feedback
    zh-CN: 反馈
</i18n>

<script>
  import {ViewBox, XHeader, Tabbar, TabbarItem, cookie} from 'vux'

  export default {
    name: 'app',
    components: {
      ViewBox,
      XHeader,
      Tabbar,
      TabbarItem,
      cookie
    },
    data () {
      return {
        topPadding: '46px',
        bottomPadding: '55px',
        language: localStorage.language ? localStorage.language : 'en'
      }
    },
    created () {
      if (!localStorage.Haslogin) {
        this.$vux.alert.show({
          title: '公告',
          content: '尊敬的用户:由于平台要进行改版，今天会进行改版前的测试工作，需要重新下载app，此次测试时间为2小时，9月1日20:00开始测试，测试期间会员请勿登录账号、望用户知晓!',
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            localStorage.Haslogin = true
          }
        })
      }
    },
    computed: {
      route () {
        return this.$route
      },
      isShowNav () {
        let showNav = true
        switch (this.route.path) {
          case '/':
            showNav = false
            break
          case '/index':
            showNav = false
            break
          // case '/login':
          //   showNav = false
          //   break
          // case '/register':
          //   showNav = false
          //   break
        }
        return showNav
      },
      isTabar () {
        let showTabbar = false
        switch (this.route.path) {
          case '/index':
            showTabbar = true
            break
          case '/transaction':
            showTabbar = true
            break
          case '/mill':
            showTabbar = true
            break
          case '/charting':
            showTabbar = true
            break
          case '/personal':
            showTabbar = true
            break
        }
        return showTabbar
      },
      leftOptions () {
        let showBack = true
        switch (this.route.path) {
          case '/':
            showBack = false
            break
          case '/index':
            showBack = false
            break
          case '/transaction':
            showBack = false
            break
          case '/mill':
            showBack = false
            break
          case '/personal':
            showBack = false
            break
          case '/charting':
            showBack = false
            break
        }
        return {
          backText: '',
          showBack: showBack
        }
      },
      title () {
        // return this.route.name
        let title = this.$t('title.' + this.route.name)
        return title
      }
    },
    methods: {
      changeLanguage () {
        console.log(this.language)
        this.$i18n.set(this.language)
        localStorage.language = this.language
        // this.$locale.set(this.language)
      },
      goFeedback () {
        this.$router.push({path: '/feedback'})
      },
      goMenu (path) {
        let vue = this
        if (this.$route.path === '/' + path) {
          return false
        } else {
          if (vue.$store.state.needValidate) {
            vue.$vux.confirm.show({
              title: vue.$t('waring'),
              content: vue.$t('no authered'),
              onCancel () {
              },
              onConfirm () {
                vue.$router.push({path: '/personalinfo'})
              }
            })
          } else {
            this.$router.push({path: '/' + path})
          }
        }
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/tap.less';
  @import "assets/style/style.less";
  .router-view {
    width: 100%;
    top: 46px;
  }
  .weui-tabbar__icon > sup {
    top: 0px !important
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  html{
    font-size: calc(100vw / 7.5);
  }
  body{
    background-color: #ffffff;
    font-size: 0.14rem;
  }
  .header-selected {
    background: #4774bc;
    border-color: #4774bc;
    color: #fff;
  }
  .weui-toast {
    width: 13.6em!important;
  }
</style>
